<template>
    <div class="app-container">
        <section>
            <div class="content" v-loading="loading">
                <div class="depart">
                    <div class="title">{{title}}</div>
                    <div class="depart-li">
                        <el-tree :data="menuList" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :default-checked-keys="menu_id" :props="defaultProps" @check="handleCheckChange">
                        </el-tree>
                    </div>
                </div>
                <div class="bottom-btn" >
                    <el-button :loading="isBtn" @click="saveRoleMenu" type="primary" style="width:143px">确定</el-button>
                    <el-button plain style="width:143px" @click="$router.go(-1)">取消</el-button>
                </div>
            </div>
        </section>
    </div>
</template>

<script>

export default {
    data() {
        return {
            id: 0,           //角色id
            title: '',       //标题
            loading: false,  //页面加载
            isBtn: false,    //按钮加载
            menu_id: [],     //权限id组
            menuList: [],   //权限列表
            type:1,        //1角色分配权限  2管理员分配权限
            defaultProps: { //
                children: 'child',
                label: 'title'
            },
        }
    },
    created() {
        let { id, name ,type=1} = this.$route.query;
        this.title = name;
        if (id) {
            this.type = type;
            this.id = id;
            this.getRolePermissions();
        }
    },
    methods: {
        handleCheckChange(data, checked) {
            this.menu_id = checked.checkedKeys;
        },
        dedupe(array) {
            return Array.from(new Set(array));
        },
        removeWithoutCopy(arr, item) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == item) {
                    //splice方法会改变数组长度，当减掉一个元素后，后面的元素都会前移，因此需要相应减少i的值  
                    arr.splice(i, 1);
                    i--;
                }
            }
            return arr;
        },
        async saveRoleMenu() {
            if(this.type == 1){
                //权限保存
                this.isBtn = true;
                let { code, data, msg } = await this.$Http.saveRoleMenu({
                    role_id: this.id,
                    menu_id: this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()).join(','),//半选状态+选中的id
                    menu_list: this.menu_id.join(',')//没有半选状态id
                })
                this.isBtn = false;
                if (code) {
                    this.$message.success('修改成功!');
                    this.utils.backPage();
                }
            }else if(this.type==2){
                //权限保存
                this.isBtn = true;
                let { code, data, msg } = await this.$Http.adminMenuSave({
                    id: this.id,
                    menu_id: this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()).join(','),//半选状态+选中的id
                    menu_list: this.menu_id.join(',')//没有半选状态id
                })
                this.isBtn = false;
                if (code) {
                    this.$message.success('修改成功!');
                    this.utils.backPage();
                }
            }else{
                // this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()).join(',')
                //权限保存
                this.isBtn = true;
                let { code, data, msg } = await this.$Http.staffMenuSave({
                    id: this.id,
                    menu_id: this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()).join(','),//半选状态+选中的id
                    menu_list: this.menu_id.join(',')//没有半选状态id
                })
                this.isBtn = false;
                if (code) {
                    this.$message.success('修改成功!');
                    this.utils.backPage();
                }
            }
        },
        menuRecursion(list){
            return list.filter(v=>{
                // if(v.id == )
            })
        },
        async getRolePermissions() {//获取角色权限
            this.loading = true;
            if(this.type==1){
                let { code, data} = await this.$Http.roleMenuInfo({ role_id: this.id });
                if (code) {
                    this.menuList = data.menu;
                    this.menu_id = (data.menu_list || '').split(',');
                    console.log(this.menu_id)
                }
            }else if(this.type==2) {
                let { code, data} = await this.$Http.adminMenu({ admin_id: this.id });
                if (code) {
                    this.menuList = data.menu;
                    this.menu_id = (data.menu_list || '').split(',');
                    // data.menu.forEach(v=>{
                    //     this.menu_id
                    // });
                    // this.menu_id
                    console.log(this.menu_id,"@@@@@")
                }
            }else{
                let { code, data} = await this.$Http.staffMenu({ staff_id: this.id });
                if (code) {
                    this.menuList = data.menu;
                    this.menu_id = (data.menu_list || '').split(',');
                    console.log(this.menu_id,"@@@@@")
                }
            }
            this.loading = false;
            
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el-tree-node__content {
        height: 40px;
    }
}
.bottom-btn{
    position: fixed;
    bottom: 0px;
    background: #fff;
    z-index: 99;
    padding: 20px 0;
}
.app-container {
    ::v-deep .el-form-item__label {
        float: initial;
    }
    // .kong {
    //     height: 40px;
    // }
    section {
        background: #eee;
        padding: 30px 30px 0;
        .content {
            height: 100%;
            background: #fff;
            border-radius: 8px;
            padding: 0 45px;
            min-height: calc(100vh - 150px);
            .depart {
                padding-bottom: 50px;
                .title {
                    height: 74px;
                    font-size: 18px;
                    line-height: 74px;
                    font-size: 20px;
                    font-weight: 600;
                    color: #383b40;
                    border-bottom: 1px solid #e8ecef;
                }
                .depart-li {
                    padding: 20px 0;
                    border-bottom: 1px solid #e8ecef;
                    &:last-child {
                        border-bottom: none;
                    }
                }
            }
        }
    }
}
</style>